<template>
  <div class="ticket">
    <el-page-header @back="goBack" content="电影购票"></el-page-header>
    <div class="buy" v-show="movieDetail.status == 1">
      <ul>
        <li class="ticketList" v-for="(item, index) in buyList" :key="index">
          <p class="name">{{ item.name }}</p>
          <p class="time">{{ item.date }} {{ item.startTime }}</p>
          <el-tag effect="plain">{{ item.type }}放映</el-tag>
          <el-button class="btn" type="danger" round @click="toSelectSeat(item)">
            选座购票</el-button
          >
          <p class="price">￥{{ item.price }}</p>
        </li>
      </ul>
    </div>
    <div class="no_film" v-show="movieDetail.status == 0 || buyList.length==0">
      影院暂时没有排片！！
    </div>
  </div>
</template>
<script>
import { MovieArrangementByFid } from "@/api/movie";
export default {
  data() {
    return {
      // m_name: "XXXXXX",
      buyList: [
        // {
        //   name: "XXXXXX",
        //   time: "2022-01-12 15:25",
        //   play_type: "2D",
        //   price: 30.5,
        // },
        // {
        //   name: "XXXXXX",
        //   time: "2022-01-12 19:10",
        //   play_type: "3D",
        //   price: 35.5,
        // },
      ],
      movieDetail: {},
    };
  },
  mounted() {
    this.getMovieArrangement();
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    // 获取电影排片信息
    getMovieArrangement() {
      MovieArrangementByFid(localStorage.getItem("fid")).then((res) => {
        res.msg="电影排片";
        // console.log(res);
        for(var i=0;i<res.data.arrangements.length;i++){
          res.data.arrangements[i].date=this.formatDate2(res.data.arrangements[i].date);
          res.data.arrangements[i].startTime=this.formatDate1(res.data.arrangements[i].startTime);
        }
        this.buyList = res.data.arrangements;
        this.movieDetail = res.data.film;
        // console.log(this.buyList);
        // console.log(this.movieDetail);
      });
    },
    // 日期格式化 时分秒
    formatDate1(dateint) {
      var date = new Date(parseInt(dateint));
      var str ="";
      if(date.getHours()<10){
        str+="0";
      }
      str+=date.getHours()+":";
      if(date.getMinutes()<10){
        str+="0";
      }
       str+=date.getMinutes()+":";
      if(date.getSeconds()<10){
        str+="0";
      }
      str+=date.getSeconds();
      return str;
    },
    // 日期格式化 年月日
    formatDate2(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
    // 点击购票按钮
    toSelectSeat(item){
      localStorage.setItem("aid",item.id);
      this.$router.push("/selection?aid="+item.id)
    }
  },
};
</script>
<style lang="scss" scoped>
.ticket {
  width: 1000px;
  min-height: 500px;
  margin: 0 auto;
  .buy {
    margin-top: 30px;
    ul {
      list-style: none;
      li {
        margin: 30px 0;
        .name {
          font-size: 18px;
          margin-bottom: 10px;
        }
        .time {
          font-size: 12px;
          color: lightgray;
          margin-bottom: 8px;
        }
        .price {
          font-size: 18px;
          font-weight: bold;
          float: right;
          color: rgb(245, 108, 108);
          position: relative;
          right: 30px;
          bottom: 26.5px;
        }
        .btn {
          float: right;
          border: 1px gray solid;
          bottom: 34.5px;
          position: relative;
          li {
            margin: 0;
          }
        }
      }
    }
  }
  .no_film {
    height: 500px;
    margin: 30px 0;
    font-size: 30px;
    color: rgb(245, 108, 108);
  }
}
</style>